<template>
	<view class="self">
		<view class="user flex-between">
			<view class="left flex">
				<image src="/static/1.jpg" mode="aspectFill" class="avatar"></image>
				<view class="name">Lakin4622</view>
			</view>
			<view class="right flex" @click="goPage('/pages/self/account')">
				主页
				<image src="/static/arrow.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="card-box flex-between">
			<view class="item flex-center-column" @click="goPage('/pages/self/account')">
				<view class="h3">0</view>
				<text>动态</text>
			</view>
			<view class="item flex-center-column" @click="goPage('/pages/self/account')">
				<view class="h3">0</view>
				<text>粉丝</text>
			</view>
			<view class="item flex-center-column">
				<view class="h3">0</view>
				<text>关注</text>
			</view>
			<view class="item flex-center-column">
				<view class="h3">0</view>
				<text>获赞</text>
			</view>
			
		</view>
		<view class="wallet">
			<view class="top flex-between">
				<view class="name">钱包</view>
				<text>></text>
			</view>
			<view class="middle flex-between">
				<view>
					<text>USDT</text>
					<view class="h3">0.0000</view>
				</view>
				<view>
					<text>LK</text>
					<view class="h3">0.0000</view>
				</view>
			</view>
			<view class="bottom flex-between">
				<view class="btn flex-center" @click="goPage('/pages/self/recharge')">充值</view>
				<view class="btn flex-center" @click="goPage('/pages/self/withdraw')">提现</view>
				<view class="btn flex-center" @click="goPage('/pages/self/exchange')">兑换</view>
			</view>
		</view>
		<!-- 社区经济人 -->
		<view class="shequ-box">
			<view class="flex-between" @click="goPage('/pages/self/shequPerson')">
				<view class="h2">社区经济人</view>
				<image src="/static/arrow.png" mode="widthFix" class="arrow"></image>
			</view>
			<view class="list flex-between">
				<view class="p">我的邀请</view>
				<text>0</text>
			</view>
			<view class="list flex-between">
				<view class="p">昨日佣金</view>
				<text>0</text>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="shequ-box">
			<view class="flex-between">
				<view class="h2">我的服务</view>
			</view>
			<view class="service flex-between">
				<view class="item flex-center-column">
					<image src="/static/tab2a.png" mode="widthFix"></image>
					<text>我的客服</text>
				</view>
				<view class="item flex-center-column" @click="goPage('/pages/self/orderList')">
					<image src="/static/tab2a.png" mode="widthFix"></image>
					<text>工单</text>
				</view>
				<view class="item flex-center-column" @click="goPage('/pages/self/helpList')">
					<image src="/static/tab2a.png" mode="widthFix"></image>
					<text>帮助中心</text>
				</view>
				<view class="item flex-center-column" @click="goPage('/pages/self/setting')">
					<image src="/static/tab2a.png" mode="widthFix"></image>
					<text>设置</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goPage(url){
				uni.navigateTo({
					url:url
				})
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:"/pages/self/edit"
			})
		}
	}
</script>

<style lang="less">
	@color:#d4237a;
	.self{
		padding: 24rpx;
		.user{
			.left{
				.avatar{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 24rpx;
				}
				.name{
					font-size: 34rpx;
					font-weight: bold;
				}
			}
			.right{
				background: white;
				font-size: 30rpx;
				padding: 5rpx 10rpx 5rpx 25rpx;
				border-radius: 30rpx;
				image{
					width: 30rpx;
					height: auto;
				}
			}
		}
		.card-box{
			padding: 30rpx 0;
			.item{
				width: 20%;
				view{
					font-size: 32rpx;
					font-weight: bold;
				}
				text{
					font-size: 26rpx;
					color:#999;
				}
			}
		}
		.wallet{
			background: @color;
			padding: 24rpx;
			border-radius: 15rpx;
			color:#fff;
			.top{
				margin: 10rpx 0 30rpx;
				.name{
					font-size: 34rpx;
				}
				text{
					transform: scaleY(1.8);
					font-size: 28rpx;
				}
			}
			.middle{
				&>view{
					width: 45%;
				}
				text{
					font-size: 24rpx;
				}
				.h3{
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.bottom{
				margin-top: 30rpx;
				.btn{
					width: 30%;
					height: 60rpx;
					box-sizing: border-box;
					border:1px solid #fff;
					border-radius: 35rpx;
					font-size: 28rpx;
					&:last-child{
						background: white;
						color:@color;
					}
				}
			}
		}
		.shequ-box{
			background: #fff;
			border-radius: 15rpx;
			padding: 0 24rpx 20rpx;
			margin: 50rpx 0;
			.arrow{
				width: 30rpx;
				height: auto;
			}
			.h2{
				line-height: 3;
				font-size: 36rpx;
				font-weight: bold;
			}
			.list{
				line-height: 2;
				.p{
					font-size: 30rpx;
					color:#666;
				}
			}
			.service{
				.item{
					width: 25%;
					image{
						width: 50rpx;
						height: auto;
						margin-bottom: 10rpx;
					}
					text{
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>
